<template>
    <div class="walletDetails">
        <div class="top">
            <i class="iconfont iconzuojiantou" @click="goBack"></i>
            <span>钱包明细</span>
            <i></i>
        </div>
        <div class="content">
            <div class="tab">
                <span :class="act==1?'active':''" @click="tabBtn(1)">明细</span>
                <span :class="act==2?'active':''" @click="tabBtn(2)">提现记录</span>
            </div>
               <div v-show="oneShow">
                    <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                      @load="onLoad"
                    >
                    <van-cell v-for="(item,index) in dataList" :key="index" >
                       <div class="list" >
                          <div class="one">
                            <span class="spn1">{{item.incomeType==1?'邀请好友佣金':item.incomeType==2?"任务结算":"余额充值"}}</span>
                            <span :class="item.incomeGold<0?'active2':''">{{item.incomeGold<0?item.incomeGold:'+'+item.incomeGold}}</span>
                          </div>
                        <div class="two">
                            {{item.incomeCreateTime}}
                        </div>
                       </div>
                    </van-cell>
                </van-list>
               </div>
               <!-- 提现记录 -->
               <div v-show="twoShow">
                    <van-list
                         v-model="loadingTwo"
                        :finished="finishedTwo"
                        finished-text="没有更多了"
                        @load="getMoreData"                
                    >
                        <van-cell v-for="(item,index) in listTwoData" :key="index">
                           <div class="listTwo">
                                <div >
                                <span >
                                  {{item.extractType==1?"提现中":item.extractType==2?"提现拒绝":item.extractType==3?"提现成功":item.extractType}}
                                  <span v-show="item.extractType==2" :class="item.extractType==2?'actives':''"  @click="getExtractCause(item.extractCause)">( 查看原因 )</span>
                                </span>
                                <span>
                                    {{'-'+item.extractReceived}}
                                </span>
                            </div>
                            <div >
                                <span>{{item.extractCreateTime}}</span><span>手续费 {{item.extractCost}}</span>
                            </div>
                           </div>
                           
                        </van-cell>
                    </van-list>
               </div>
               <van-overlay :show="show" @click="show = false" >
                  <div class="wrapper" >
                        <div class="block" >
                               {{extractCause}} 
                        </div>
                    </div>
                </van-overlay>
        </div>

    </div>
</template>

<script>
import { List,Toast ,Overlay } from 'vant';
export default {
    name:'walletDetails',
    data (){
        return {
            act:1,
            dataList: [],
            loading: false,
            finished: false,
            oneShow:true,
            twoShow:false,
             loadingTwo: true,
            finishedTwo: true,
            listTwoData:[],
             show: false,
             extractCause:''
        }
    },
    created(){
        // this.getDataList();
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
        tabBtn(num){
            this.act =num;
            if(num==1){
               this.getDataList();  
                this.oneShow=true;
                this.twoShow=false;
            }else{
                this.oneShow=false;
                this.twoShow=true;
                this.withdrawalRecord();
            }
        },
        //查看拒绝原因
        getExtractCause(val){
            this.show=true;
            this.extractCause=val;
        },
         //获取收入记录
        getDataList (){
            this.$axios.get("/cct/income/userincome",{}).then(res =>{
                console.log("获取收入记录",res)
                if(res.data.code==0){
                    this.dataList =res.data.rows;
                }
            }) 
        },
        //获取提现记录
        withdrawalRecord (){
            this.$axios.post("/cct/extract/userWithdrawal",{}).then(res =>{
                console.log("提现记录",res)
                if(res.data.code==0){
                    this.listTwoData = res.data.rows;
                }
            })
        },
         onLoad(){
             this.getDataList ();
               this.loading = false;
               this.finished=true;
         },
         getMoreData(){
            this.loadingTwo = false;
            this.finishedTwo=true;  
             this.withdrawalRecord();
         }
    }
}
</script>

<style lang="less" scoped>
    .walletDetails{
        width: 100%;
        position: relative;
        background-color: #f8f8f8;
        font-size: 0;
        .top{
            width: 100%;
            padding:0 0.2rem;
            box-sizing: border-box;
            background-color: #fff;
            height: 1rem;
            line-height: 1rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.28rem;
            color:#333;
            position: absolute;
            top:0;
            left:0;
        }
        .content{
            width: 100%;
            padding:0.2rem;
            box-sizing: border-box;
            position: absolute;
            top:1rem;
            // bottom: 0;
            left:0;
            right:0;
            overflow-y: scroll;
            .tab{
                width: 100%;
                height: 1rem;
                line-height: 1rem;
                background-color: #fff;
                font-size:0.3rem;
                color:#333;
                display:flex;
                justify-content:space-around;   
                span{
                   
                    display:inline-block;
                    padding:0 0.3rem;
                   &.active{
                        border-bottom:2px solid #38A83F;
                   }    
                }
            }
            .list{
                font-size:0.28rem;
                .one{
                    display:flex;
                    justify-content:space-between;
                    padding:0.15rem 0;
                    box-sizing:border-box;
                    span{
                        &:nth-child(1){
                            color:#333333
                        }
                        &:nth-child(2){
                            color:#38A83F;
                        }
                        &.active2{
                            color:red;
                        }
                    }
                    .two{
                        color:#666666;
                        font-size:0.22rem;
                    }
                }
            }
            .listTwo{
                width:100%;
                div{
                    display:flex;
                    justify-content:space-between;
                    font-size:0.28rem;
                    &:nth-child(1){
                        span{
                            color:#333;
                        }
                        .actives{
                            color:red;
                        }
                    }
                     &:nth-child(2){
                        span{
                            color:#666;
                            font-size:0.24rem;
                        }
                    }
                }
            }

        }
         .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .block {
            width: 70%;
            padding:0.5rem;
            background-color: #fff;
            border-radius:0.15rem;
            font-size:0.28rem;
            color:#333;
        }
    }
</style>
